<template>
	<view class="content">
		<view class="item">
			<view class="txt">收货人</view>
			<view class="input"><input maxlength="10" v-model="name" placeholder="请填写收货人姓名" /></view>
			<view style="clear: both;"></view>
		</view>

		<view class="item">
			<view class="txt">手机号码</view>
			<view class="input"><input maxlength="11" v-model="phone" type="number" placeholder="请填写收货人手机号码" /></view>
			<view style="clear: both;"></view>
		</view>

		<view class="item">
			<view class="txt">所在地区</view>
			<view class="input" @click="getArea"><input maxlength="50" v-model="area" disabled placeholder="省市区县、乡镇等" /></view>
			<view style="clear: both;"></view>
		</view>

		<view class="item">
			<view class="txt">详细地址</view>
			<view class="input"><input v-model="other" maxlength="50" placeholder="街道、楼牌号等" /></view>
			<view style="clear: both;"></view>
		</view>
		<view class="defV">
			<view>设置为默认地址</view>
			<text class="defNoice">提示:每次下单会默认推荐使用该地址</text>
			<switch class="isDef" @change="switchChange" color="#e98f36" :checked="isDef" />
		</view>
		
		<selectAddress ref="selectAddress" @selectAddress="successSelectAddress"></selectAddress>
		<view class="sure" @click="toUpdate">保存地址</view>
	</view>
</template>

<script>
import selectAddress from '@/components/yixuan-selectAddress/yixuan-selectAddress.vue';
export default {
	components: {
		selectAddress
	},
	data() {
		return {
			area:'',
			name:'',
			phone:'',
			other:'',
			id:'',
			isDef:false
		};
	},
	computed: {},
	methods: {
		switchChange: function (e) {
			this.isDef = e.target.value;
		},
		//修改地址信息
		toUpdate(){
			uni.showLoading({
				title:'处理中...',
				mask:true
			});
			let that = this;
			if (this.VerifyTel(this.phone)) {
				if(this.area.split('-').length ==2){
					this.area+='-其他';
				}
				
				if(this.name.length==0){
					uni.showToast({
						icon:'none',
						title: '收货人不能为空',
						duration: 1000
					});
					return;
				}
				if(this.area.length==0){
					uni.showToast({
						icon:'none',
						title: '地区不能为空',
						duration: 1000
					});
					return;
				}
				//详细地址不能少于五个字
				if(this.other.length<5){
					uni.showToast({
						icon:'none',
						title: '详情地址不清晰',
						duration: 1000
					});
					return;
				}
				let opts = {
					url: 'myUserAddress/updateOrADddAddr',
					method: 'post'
				};
				let param = {
						id:that.id,
						province:that.area.split('-')[0],
						city:that.area.split('-')[1],
						district:that.area.split('-')[2],
						street:that.other,
						mobile:that.phone,
						consignee:that.name,
						isDef:that.isDef//是否默认地址
				};
				this.tokenRequest(opts, param).then(res => {
					uni.hideLoading();
					uni.showToast({
						icon:'none',
						mask:true,
						title: res.msg,
						duration: 1000
					});
					setTimeout(function(){
						uni.redirectTo({
							url: 'index'
						});
					},1000)
				}, error => {})
			}
		},
		getArea() {
			this.$refs.selectAddress.show();
		},
		successSelectAddress(address) {
			this.area = address;
		}

	},onLoad(options) {
		this.id = options.id;
		if(options.id.length==0){
			return;
		}
		let opts = {
			url: 'myUserAddress/getDetail/'+this.id,
			method: 'get'
		};
		let param = {};
		this.tokenRequest(opts, param).then(res => {
			uni.hideLoading();
			let rData = res.data;
			this.area =  rData.province+"-"+rData.city+"-"+rData.district;
			this.other = rData.street;
			this.isDef = rData.isDefault == 0?false:true;
			this.name = rData.receiver;
			this.phone = rData.tel;
		}, error => {})
	}
};
</script>

<style scoped>
	.defV{
		padding: 20upx;
		margin-bottom: 100upx;
	}
	.isDef{
		float: right;
		height: 40upx !important;
	}
	.defNoice{
		font-size: 28upx;
		float: left;
		margin-top: 15upx;
		color: #4D4D4D;
	}
	
.item {
	padding: 10upx;
	line-height: 80upx;
	margin: 20upx;
	border-bottom: 1upx solid #c8c7cc;
}
.item .txt {
	width: 150upx;
	float: left;
	line-height: 80upx;
	
}
.item .input {
	width: 500upx;
	line-height: 80upx;
	float: left;
}
input {
	height: 80upx;
}

.content {
	font-size: 30upx;
}

.sure {
	width: 610upx;
	margin-left: 70upx;
	margin-top: 80upx;
	padding-top: 15rpx;
	padding-bottom: 15rpx;
	border-radius: 20upx;
	background-color: #e98f36;
	color: #fefdff;
	text-align: center;
	line-height: 69rpx;
}
</style>
